<template>
    <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import TOKEN from '@/utils/cesium/token.js';

const CesiumObj = {
    viewer: null,
};
onMounted(async () => {
    Cesium.Ion.defaultAccessToken = TOKEN;
    // 实例化
    const viewer = new Cesium.Viewer('cesiumContainer', {
        // 界面控件 全部关闭
        animation: false, // 左下角的动画控制器组件
        baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: true, // 全屏组件
        vrButton: false, // VR模式
        geocoder: false, // 地理编码（搜索）组件
        homeButton: false, // 首页，点击之后将视图跳转到默认视角
        infoBox: false, // 信息框
        sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, // 时间轴
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: false,
    });
    // 隐藏logo
    viewer._cesiumWidget._creditContainer.style.display = 'none';
    // 资产地形

    // viewer.scene.camera.setView({
    //     destination: Cesium.Cartesian3.fromDegrees(120.546, 32.567, 500),
    //     endTransform: Cesium.Matrix4.IDENTITY,
    // });
    CesiumObj.viewer = viewer;
    initEntity();
});

/* 在 Cesium.js 中，MaterialProperty（材质属性）是用于定义材质在时间和空间上变化的动态属性。
       它提供了一种机制，可以根据时间、位置、实时数据等动态因素来控制材质的外观效果。 */
class ConsumerMaterialProperty {
    constructor() {
        /* 获取每当此属性的定义更改时引发的事件。
          通用实用程序类，用于管理特定事件的订户。此类通常在容器类内部实例化，公开作为财产供其他人订阅。
          */
        this.definitionChanged = new Cesium.Event();
        this.myArg1Copy = null;
        this.addMaterial();
    }
    addMaterial() {
        // 它用于在 Cesium 中的材质缓存中添加新的材质。
        Cesium.Material._materialCache.addMaterial('ConsumerMaterial', {
            fabric: {
                type: 'ConsumerMaterial',
                uniforms: {},
                source: `      
		czm_material czm_getMaterial(czm_materialInput materialInput)
	{
		czm_material material = czm_getDefaultMaterial(materialInput);
		material.diffuse = vec3(materialInput.st,0);
		return material;
	}`,
            },
        });
    }
    eventhandle(arg1) {
        console.log('监听事件被调用', arg1);
        this.myArg1Copy = arg1;
    }
    getType(time) {
        // 返回材质类型
        // console.log('返回类型')
        return 'ConsumerMaterial';
    }
    getValue(time, result) {
        // 返回材质值
        // console.log('返回值', result)
        return result;
    }
}

function initEntity() {
    const viewer = CesiumObj.viewer;
    const material = new ConsumerMaterialProperty();
    // 调用类里面的事件
    material.definitionChanged.addEventListener(material.eventhandle, material);
    material.definitionChanged.raiseEvent('1');
    // // 移除事件监听
    // material.definitionChanged.removeEventListener(material.eventhandle);
    const entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0, 100000),
        ellipse: {
            semiMajorAxis: 200,
            semiMinorAxis: 200,
            height: 0, //离地面的高度
            material: material, //添加材质
        },
    });
    console.log(material, 'material');
    viewer.zoomTo(entity);
}
</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
}
</style>
